import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, Filter, Tag, ChevronLeft, ChevronRight } from 'lucide-react';
export function Loadouts() {
  // Filter states
  const [activeActivity, setActiveActivity] = useState('all');
  const [activeDuration, setActiveDuration] = useState('all');
  const [currentPage, setCurrentPage] = useState(1);
  const loadoutsPerPage = 6;
  // Sample loadout data
  const allLoadouts = [{
    id: '24-hour-trek',
    title: '24-HOUR LIGHTWEIGHT TREK LOADOUT',
    description: 'Everything you need for a fast and light 24-hour adventure in the mountains. This carefully curated gear selection balances weight, functionality, and durability.',
    image: 'https://images.unsplash.com/photo-1627163439134-7a8c47e08208?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    activity: 'hiking',
    duration: 'day',
    totalWeight: '5.4kg',
    itemCount: 14,
    featured: true
  }, {
    id: 'winter-alpine-climb',
    title: 'WINTER ALPINE CLIMBING KIT',
    description: 'Technical climbing gear for serious winter mountaineering expeditions. Designed for safety, efficiency, and reliability in extreme conditions.',
    image: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    activity: 'climbing',
    duration: 'multi-day',
    totalWeight: '9.2kg',
    itemCount: 22,
    featured: false
  }, {
    id: 'ultralight-thru-hike',
    title: 'ULTRALIGHT THRU-HIKING SETUP',
    description: 'A minimalist kit for long-distance trail hiking. Every gram has been scrutinized to create the lightest functional loadout possible.',
    image: 'https://images.unsplash.com/photo-1551632436-cbf8dd35adfa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    activity: 'hiking',
    duration: 'multi-day',
    totalWeight: '4.8kg',
    itemCount: 18,
    featured: false
  }, {
    id: 'bikepacking-weekend',
    title: 'WEEKEND BIKEPACKING ADVENTURE',
    description: 'The perfect balance of comfort and weight for off-road cycling adventures. Includes camping gear and bike-specific equipment.',
    image: 'https://images.unsplash.com/photo-1618245318763-a15156d6b23c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    activity: 'cycling',
    duration: 'weekend',
    totalWeight: '7.1kg',
    itemCount: 16,
    featured: false
  }, {
    id: 'packraft-expedition',
    title: 'PACKRAFTING EXPEDITION KIT',
    description: 'Specialized gear for combined hiking and water travel. Designed for exploratory routes with river crossings and lake paddling.',
    image: 'https://images.unsplash.com/photo-1439066615861-d1af74d74000?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    activity: 'water',
    duration: 'multi-day',
    totalWeight: '8.6kg',
    itemCount: 20,
    featured: false
  }, {
    id: 'family-camping',
    title: 'FAMILY CAMPING LOADOUT',
    description: 'Everything a family of four needs for a comfortable weekend in the wilderness. Emphasizes comfort, convenience, and fun.',
    image: 'https://images.unsplash.com/photo-1504851149312-7a075b496cc7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    activity: 'camping',
    duration: 'weekend',
    totalWeight: '23.5kg',
    itemCount: 35,
    featured: false
  }, {
    id: 'alpine-photography',
    title: 'ALPINE PHOTOGRAPHY KIT',
    description: 'Specialized gear for capturing stunning mountain imagery without sacrificing safety or mobility in challenging terrain.',
    image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    activity: 'hiking',
    duration: 'day',
    totalWeight: '6.7kg',
    itemCount: 12,
    featured: false
  }, {
    id: 'backcountry-ski',
    title: 'BACKCOUNTRY SKI TOURING SETUP',
    description: 'Essential gear for ski mountaineering and powder hunting. Balances uphill efficiency with downhill performance.',
    image: 'https://images.unsplash.com/photo-1605540436563-5bca919ae766?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    activity: 'winter',
    duration: 'day',
    totalWeight: '8.9kg',
    itemCount: 15,
    featured: false
  }, {
    id: 'rock-climbing-day',
    title: 'SINGLE-PITCH ROCK CLIMBING KIT',
    description: 'A streamlined rack for a day of sport and trad climbing. Includes essential safety gear and comfort items.',
    image: 'https://images.unsplash.com/photo-1522163182402-834f871fd851?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    activity: 'climbing',
    duration: 'day',
    totalWeight: '6.2kg',
    itemCount: 18,
    featured: false
  }];
  // Filter loadouts based on selected filters
  const filteredLoadouts = allLoadouts.filter(loadout => {
    if (activeActivity !== 'all' && loadout.activity !== activeActivity) return false;
    if (activeDuration !== 'all' && loadout.duration !== activeDuration) return false;
    return true;
  });
  // Pagination logic
  const indexOfLastLoadout = currentPage * loadoutsPerPage;
  const indexOfFirstLoadout = indexOfLastLoadout - loadoutsPerPage;
  const currentLoadouts = filteredLoadouts.slice(indexOfFirstLoadout, indexOfLastLoadout);
  const totalPages = Math.ceil(filteredLoadouts.length / loadoutsPerPage);
  // Change page
  const paginate = pageNumber => setCurrentPage(pageNumber);
  return <div className="w-full bg-earth-dark">
      {/* Hero Section */}
      <section className="relative h-[50vh] flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img src="https://images.unsplash.com/photo-1496615200163-2c4c41a47a5a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80" alt="Gear loadout" className="w-full h-full object-cover" />
          <div className="absolute inset-0 bg-carbon-black opacity-60"></div>
        </div>
        <div className="container mx-auto px-4 relative z-10 text-center">
          <h1 className="font-display text-5xl md:text-7xl text-white mb-4 drop-shadow-lg">
            THE LOADOUT
          </h1>
          <p className="text-xl md:text-2xl text-sand-light mb-8 max-w-3xl mx-auto drop-shadow-md">
            Curated gear collections for specific adventures, tested and
            approved by our experts
          </p>
        </div>
      </section>
      {/* Filters */}
      <section className="py-8 bg-carbon-black sticky top-[73px] z-30">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="flex items-center mb-4 md:mb-0">
              <Filter size={20} className="mr-2" />
              <span className="font-display mr-4">FILTER BY:</span>
            </div>
            <div className="flex flex-wrap gap-2">
              <div className="mr-4">
                <span className="text-sm text-gray-400 block mb-1">
                  Activity
                </span>
                <div className="flex flex-wrap gap-2">
                  <button onClick={() => setActiveActivity('all')} className={`px-3 py-1 text-sm rounded-full ${activeActivity === 'all' ? 'bg-outdoor-orange' : 'bg-earth-dark'}`}>
                    All
                  </button>
                  <button onClick={() => setActiveActivity('hiking')} className={`px-3 py-1 text-sm rounded-full ${activeActivity === 'hiking' ? 'bg-outdoor-orange' : 'bg-earth-dark'}`}>
                    Hiking
                  </button>
                  <button onClick={() => setActiveActivity('climbing')} className={`px-3 py-1 text-sm rounded-full ${activeActivity === 'climbing' ? 'bg-outdoor-orange' : 'bg-earth-dark'}`}>
                    Climbing
                  </button>
                  <button onClick={() => setActiveActivity('water')} className={`px-3 py-1 text-sm rounded-full ${activeActivity === 'water' ? 'bg-outdoor-orange' : 'bg-earth-dark'}`}>
                    Water
                  </button>
                  <button onClick={() => setActiveActivity('cycling')} className={`px-3 py-1 text-sm rounded-full ${activeActivity === 'cycling' ? 'bg-outdoor-orange' : 'bg-earth-dark'}`}>
                    Cycling
                  </button>
                  <button onClick={() => setActiveActivity('camping')} className={`px-3 py-1 text-sm rounded-full ${activeActivity === 'camping' ? 'bg-outdoor-orange' : 'bg-earth-dark'}`}>
                    Camping
                  </button>
                  <button onClick={() => setActiveActivity('winter')} className={`px-3 py-1 text-sm rounded-full ${activeActivity === 'winter' ? 'bg-outdoor-orange' : 'bg-earth-dark'}`}>
                    Winter
                  </button>
                </div>
              </div>
              <div>
                <span className="text-sm text-gray-400 block mb-1">
                  Duration
                </span>
                <div className="flex flex-wrap gap-2">
                  <button onClick={() => setActiveDuration('all')} className={`px-3 py-1 text-sm rounded-full ${activeDuration === 'all' ? 'bg-outdoor-orange' : 'bg-earth-dark'}`}>
                    All
                  </button>
                  <button onClick={() => setActiveDuration('day')} className={`px-3 py-1 text-sm rounded-full ${activeDuration === 'day' ? 'bg-outdoor-orange' : 'bg-earth-dark'}`}>
                    Day Trip
                  </button>
                  <button onClick={() => setActiveDuration('weekend')} className={`px-3 py-1 text-sm rounded-full ${activeDuration === 'weekend' ? 'bg-outdoor-orange' : 'bg-earth-dark'}`}>
                    Weekend
                  </button>
                  <button onClick={() => setActiveDuration('multi-day')} className={`px-3 py-1 text-sm rounded-full ${activeDuration === 'multi-day' ? 'bg-outdoor-orange' : 'bg-earth-dark'}`}>
                    Multi-Day
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* Loadouts Grid */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="mb-8">
            <h2 className="font-display text-3xl md:text-4xl mb-2">
              {filteredLoadouts.length} LOADOUTS FOUND
            </h2>
            <p className="text-gray-400">
              Showing {indexOfFirstLoadout + 1}-
              {Math.min(indexOfLastLoadout, filteredLoadouts.length)} of{' '}
              {filteredLoadouts.length} loadouts
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {currentLoadouts.map(loadout => <Link key={loadout.id} to={`/loadouts/${loadout.id}`} className="group">
                <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                  <div className="relative h-64 overflow-hidden">
                    <img src={loadout.image} alt={loadout.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                    {loadout.featured && <div className="absolute top-0 left-0 bg-outdoor-orange px-3 py-1">
                        <span className="font-display text-sm">FEATURED</span>
                      </div>}
                  </div>
                  <div className="p-6 flex flex-col flex-grow">
                    <h3 className="font-display text-xl mb-3 group-hover:text-outdoor-orange transition-colors">
                      {loadout.title}
                    </h3>
                    <p className="text-gray-300 mb-6 flex-grow">
                      {loadout.description}
                    </p>
                    <div className="flex justify-between items-center mt-auto">
                      <div className="flex space-x-4">
                        <div className="text-sm">
                          <span className="text-gray-400">Weight:</span>{' '}
                          {loadout.totalWeight}
                        </div>
                        <div className="text-sm">
                          <span className="text-gray-400">Items:</span>{' '}
                          {loadout.itemCount}
                        </div>
                      </div>
                      <span className="text-outdoor-orange flex items-center">
                        View Details
                        <ArrowRight size={16} className="ml-1 transition-transform group-hover:translate-x-1" />
                      </span>
                    </div>
                  </div>
                </div>
              </Link>)}
          </div>
          {/* Pagination */}
          {totalPages > 1 && <div className="mt-12 flex justify-center">
              <div className="flex items-center space-x-2">
                <button onClick={() => paginate(Math.max(1, currentPage - 1))} disabled={currentPage === 1} className={`p-2 rounded-full ${currentPage === 1 ? 'text-gray-600' : 'hover:bg-outdoor-orange hover:text-white'}`}>
                  <ChevronLeft size={20} />
                </button>
                {[...Array(totalPages)].map((_, i) => <button key={i} onClick={() => paginate(i + 1)} className={`w-10 h-10 rounded-full ${currentPage === i + 1 ? 'bg-outdoor-orange text-white' : 'hover:bg-earth-dark'}`}>
                    {i + 1}
                  </button>)}
                <button onClick={() => paginate(Math.min(totalPages, currentPage + 1))} disabled={currentPage === totalPages} className={`p-2 rounded-full ${currentPage === totalPages ? 'text-gray-600' : 'hover:bg-outdoor-orange hover:text-white'}`}>
                  <ChevronRight size={20} />
                </button>
              </div>
            </div>}
        </div>
      </section>
    </div>;
}